<template>
    <div class="addshop">
        <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="商品标题">
            <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="商品尺码">
            <el-radio-group v-for="(item,index) in size" :key="index" style="margin-right:10px;padding-left:0px;">
            <el-checkbox :label=item.cm @change="handleCheckedSize(item,index)"></el-checkbox>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="商品尺码">
            <el-radio-group v-for="(item,index) in color" :key="index" style="margin-right:10px;padding-left:0px;">
            <el-checkbox :label=item.cl @change="handleCheckedColor(item,index)"></el-checkbox>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="商品分类">
            <el-select v-model="form.classfiy" placeholder="请选择">
                <el-option label="内衣馆" value="内衣馆"></el-option>
                <el-option label="美色集市" value="美色集市"></el-option>
            </el-select>
            <el-select v-model="form.classifyItem" placeholder="请选择">
                <el-option label="T恤" value="T恤"></el-option>
                <el-option label="蕾丝衫/雪纺衫" value="蕾丝衫/雪纺衫"></el-option>
                <el-option label="衬衫" value="衬衫"></el-option>
                <el-option label="半身裙/短裙" value="半身裙/短裙"></el-option>
                <el-option label="连衣裙" value="连衣裙"></el-option>
                <el-option label="裤装" value="裤装"></el-option>
                <el-option label="卫衣" value="卫衣"></el-option>
                <el-option label="针织衫" value="针织衫"></el-option>
                <el-option label="外套" value="外套"></el-option>
                <el-option label="毛衣" value="毛衣"></el-option>
                <el-option label="毛呢大衣" value="毛呢大衣"></el-option>
                <el-option label="配饰小物" value="配饰小物"></el-option>
                <el-option label="羽绒服" value="羽绒服"></el-option>
                <el-option label="棉服" value="棉服"></el-option>
                <el-option label="内衣家居服" value="内衣家居服"></el-option>
                <el-option label="套装" value="套装"></el-option>
                <el-option label="风衣" value="风衣"></el-option>
                <el-option label="西装" value="西装"></el-option>
                <el-option label="潮袜" value="潮袜"></el-option>
                <el-option label="针织衫/毛衣" value="针织衫/毛衣"></el-option>
                <el-option label="小物" value="小物"></el-option>
                <el-option label="裤装" value="裤装"></el-option>
                <el-option label="短外套" value="短外套"></el-option>
                <el-option label="泳衣" value="泳衣"></el-option>
                <el-option label="睡袍" value="睡袍"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="商品价格">
            <el-input v-model="form.maxPrice" placeholder="请输入最大值"></el-input>
            <el-input v-model="form.minPrice" placeholder="请输入最小值"></el-input>
        </el-form-item>

        <el-form-item label="商品折扣">
            <el-input v-model="form.unitMinPrice" placeholder="请输入折扣后的最高价格"></el-input>
            <el-input v-model="form.unitMaxPrice" placeholder="请输入折扣后的最低价格"></el-input>
        </el-form-item>

        <el-form :inline="true" class="demo-form-inline" style="margin-left: 10px;">
        <el-form-item label="商品属性">
            <el-select v-model="forms.value" placeholder="请选择">
            <el-option label="品牌" value="品牌"></el-option>
            <el-option label="商品编号" value="商品编号"></el-option>
            <el-option label="商品毛重" value="商品毛重"></el-option>
            <el-option label="货号" value="货号"></el-option>
            <el-option label="版型" value="版型"></el-option>
            <el-option label="厚度" value="厚度"></el-option>
            <el-option label="领型" value="领型"></el-option>
            <el-option label="流行元素" value="流行元素"></el-option>
            <el-option label="衣门襟" value="衣门襟"></el-option>
            <el-option label="材质" value="材质"></el-option>
            <el-option label="适用年龄" value="适用年龄"></el-option>
            <el-option label="店铺" value="店铺"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="填写属性">
            <el-input v-model="forms.key" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmits">添加</el-button>
        </el-form-item>
        </el-form>
        <el-form-item label="属性选择">
            <div v-for="(item,index) in form.commodityProperty" :key="index">
                <span class="commodityProperty_span1">{{item.value}}:</span><span class="commodityProperty_span2">{{item.key}}</span>
            </div>
        </el-form-item>
        <el-form-item label="商品图片">
            <el-upload
            action="https://upload-z1.qiniup.com"
            list-type="picture-card"
            :on-success="handleAvatarSuccessCommodityImg"
            :data="uploadImg"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="form.dialogVisible">
                <img width="100%" :src="form.dialogImageUrl" alt="">
            </el-dialog>
        </el-form-item>
        <el-form-item label="商品详情">
            <el-upload
            action="https://upload-z1.qiniup.com"
            list-type="picture-card"
            :on-success="handleAvatarSuccessCommodityPhoto"
			:data="uploadImg"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="form.dialogVisible">
            <img width="100%" :src="form.dialogImageUrl" alt="">
            </el-dialog>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
        </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    created(){
        //获取token
		this.$api.$get("/uploadImg").then((res)=>{
			this.uploadImg.token = res.data.token
		})
    },
    data() {
        return {
            uploadImg:{
                token:""
            },
            size:[{cm:'XS'},{cm:"S"},{cm:"M"},{cm:"L"},{cm:"XL"}],
            color:[{cl:"红色"},{cl:"黄色"},{cl:"黑色"},{cl:"白色"},{cl:"绿色"},{cl:"天蓝色"},{cl:"藏青色"},{cl:"灰色"},{cl:"卡其色"},{cl:"粉色"},{cl:"枣红色"}],
            form: {
                name: "",
                maxPrice:'',
                minPrice:'',
                //商品分类
                classifyItem:"",
                //美色or内衣
                classfiy:"",
                unitMinPrice:'',
                unitMaxPrice:'',
                //尺寸的数组
                resource:[],
                commodityColor:[],
                desc: "",
                dialogImageUrl: '',
                //商品图片
                commodityImg:[],
                //图文详情
                commodityPhoto:[],
                dialogVisible: false,
                commodityProperty:[]
            },
            forms:{
                value: '',
                key:''
            },
        };
    },
    methods: {
        //全部添加
        onSubmit() {
            console.log(this.form)
            this.$api.$post("/add_commodity",{params:this.form}).then((res)=>{
                console.log(res)
                if(res.data.code == 200){
                    this.$message('添加成功');  
                }else{
                    this.$message('添加失败');  
                }
                this.form = {
                    name: "",
                    maxPrice:'',
                    minPrice:'',
                    unitMinPrice:'',
                    unitMaxPrice:'',
                    //尺寸的数组
                    resource:[],
                    commodityColor:[],
                    desc: "",
                    dialogImageUrl: '',
                    //商品图片
                    commodityImg:[],
                    //图文详情
                    commodityPhoto:[],
                    dialogVisible: false,
                    commodityProperty:[]
                }
            })
        },
        //添加属性
        onSubmits(){
            console.log(this.forms)
            this.form.commodityProperty = [...this.form.commodityProperty,this.forms]
            this.forms={
                value:'',
                key:""
            }
            console.log(this.form.commodityProperty)
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        //商品图片
        handleAvatarSuccessCommodityImg(res, file) {
            this.dialogImageUrl = file.url;
            var imageUrl = "http://q6k6s03kn.bkt.clouddn.com/"+file.response.key
            this.form.commodityImg = [...this.form.commodityImg,imageUrl]
            this.dialogVisible = true;
        },
        //图文详情
        handleAvatarSuccessCommodityPhoto(res, file) {
            this.dialogImageUrl = file.url;
            var imageUrl = "http://q6k6s03kn.bkt.clouddn.com/"+file.response.key
            this.form.commodityPhoto = [...this.form.commodityPhoto,imageUrl]
            this.dialogVisible = true;
        },
        handleCheckedSize(item,index){
            console.log(item.cm)
            var cms = item.cm
            this.form.resource = [cms,...this.form.resource]
            console.log(this.form.resource)
        },
        handleCheckedColor(item,index){
            console.log(item.cl)
            var cms = item.cl
            var commodityColor = {
                img:"https://img14.360buyimg.com/n9/s60x76_jfs/t1/94560/20/13480/154022/5e5ab466E5e6fef2a/dc4ffac4b46e3f6c.jpg!cc_60x76.jpg",
                color:cms
            }
            this.form.commodityColor = [commodityColor,...this.form.commodityColor]
            console.log(this.form.commodityColor)
        }
        }
};
</script>
</script>
<style lang="scss" scoped>
    .addshop{
        padding:8px;
    }
    .commodityProperty_span1{
        width: 20px;
        margin-left: 20px;
    }
    .commodityProperty_span2{
        width: 20px;
        margin-left: 20px;
    }
</style>